.qrcode-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #fff6f0 0%, #fff 100%);
    position: relative;
    padding-top: 200rpx;

    .decoration-header {
        height: 200rpx;
        background: linear-gradient(90deg, #ff5722, #ff9800);
        border-radius: 0 0 30rpx 30rpx;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        overflow: hidden;

        .breakfast-icon {
            width: 120rpx;
            height: 120rpx;
            position: absolute;
            top: 20rpx;
            left: 50%;
            transform: translateX(-50%);
        }

        .wave-animation {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60rpx;
            animation: waveMove 10s linear infinite;
        }
    }

    .content-wrapper {
        position: relative;
        z-index: 1;
        padding: 30rpx;
        margin-top: -60rpx;

        .coupon-card {
          position: relative;
          display: flex;
          justify-content: space-between;
          background: linear-gradient(120deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
          box-shadow: 0 8rpx 20rpx rgba(255, 87, 34, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.6);
          backdrop-filter: blur(20px);
          border-radius: 20rpx;
          padding: 30rpx;
          margin-bottom: 20rpx;
          overflow: hidden;
          transition: transform 0.3s ease;
          z-index: 2;
          
          &:active {
            transform: scale(0.98);
          }
          
          .coupon-left {
            .coupon-type {
              font-size: 36rpx;
              font-weight: 600;
              background: linear-gradient(90deg, #ff5722, #ff9800);
              -webkit-background-clip: text;
              color: transparent;
              margin-bottom: 16rpx;
            }
            
            .validity {
              font-size: 24rpx;
              color: #999;
              margin-bottom: 12rpx;
              
              text {
                margin-right: 20rpx;
              }
            }
            
            .code {
              font-size: 24rpx;
              color: #666;
            }
          }
          
          .coupon-right {
            text-align: right;
            
            .status-tag {
              display: inline-block;
              padding: 6rpx 20rpx;
              border-radius: 20rpx;
              font-size: 24rpx;
              background: linear-gradient(90deg, rgba(255, 87, 34, 0.15), rgba(255, 87, 34, 0.05));
              border: 1px solid rgba(255, 87, 34, 0.1);
              
              &.used {
                background: linear-gradient(90deg, rgba(153, 153, 153, 0.15), rgba(153, 153, 153, 0.05));
                border: 1px solid rgba(153, 153, 153, 0.1);
              }
            }
            
            .time-limit {
              font-size: 24rpx;
              color: #999;
            }
            
            .verify-btn {
              margin-top: 16rpx;
              padding: 8rpx 24rpx;
              background: linear-gradient(90deg, #ff5722, #ff9800);
              border-radius: 30rpx;
              color: #fff;
              font-size: 24rpx;
              display: inline-flex;
              align-items: center;
              transition: opacity 0.3s ease;
              
              .iconfont {
                margin-left: 8rpx;
                font-size: 24rpx;
              }
            }
          }
          
          .glass-effect {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, 
              rgba(255, 255, 255, 0.2) 0%,
              rgba(255, 255, 255, 0.1) 50%,
              rgba(255, 255, 255, 0) 100%
            );
            pointer-events: none;
          }
          
        }

        .qrcode-wrapper {
            margin: 40rpx 0;
            display: flex;
            flex-direction: column;
            align-items: center;

            .qrcode-border {
                background: #fff;
                padding: 20rpx;
                border-radius: 20rpx;
                box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
                position: relative;

                .scan-line {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 2rpx;
                    background: #ff5722;
                    animation: scanMove 2s linear infinite;
                }
            }

            .refresh-time {
                margin-top: 20rpx;
                font-size: 24rpx;
                color: #666;

                .icon {
                    color: #ff5722;
                    margin-right: 8rpx;
                }
            }
        }

        .security-tips {
            background: rgba(255, 87, 34, 0.1);
            border-radius: 16rpx;
            padding: 20rpx;
            margin: 30rpx 0;

            .tip-item {
                font-size: 24rpx;
                color: #ff5722;
                margin: 10rpx 0;

                .icon {
                    margin-right: 10rpx;
                }
            }
        }

        .nearby-stores {
            margin-top: 30rpx;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20rpx;
            padding: 30rpx;
            box-shadow: 0 8rpx 20rpx rgba(255, 87, 34, 0.08);

            .section-title {
                font-size: 32rpx;
                font-weight: 600;
                color: #333;
                margin-bottom: 20rpx;
                display: flex;
                align-items: center;

                .icon {
                    color: #ff5722;
                    margin-right: 10rpx;
                    font-size: 32rpx;
                }
            }

            .store-list {
                .store-item {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 20rpx 0;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

                    &:last-child {
                        border-bottom: none;
                    }

                    .store-info {
                        flex: 1;
                        margin-right: 20rpx;

                        .store-name {
                            font-size: 28rpx;
                            font-weight: 500;
                            color: #333;
                            margin-bottom: 8rpx;
                        }

                        .store-meta {
                            font-size: 24rpx;
                            color: #666;
                            margin-bottom: 8rpx;

                            .separator {
                                margin: 0 10rpx;
                                color: #ddd;
                            }
                        }

                        .store-address {
                            font-size: 24rpx;
                            color: #999;
                        }
                    }

                    .navigate-btn {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 12rpx 24rpx;
                        background: linear-gradient(90deg, #ff5722, #ff9800);
                        border-radius: 30rpx;
                        color: #fff;
                        font-size: 24rpx;

                        .icon {
                            margin-right: 6rpx;
                            font-size: 24rpx;
                        }

                        &:active {
                            opacity: 0.8;
                        }
                    }
                }
            }
        }
    }

}

@keyframes waveMove {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes scanMove {
    from {
        top: 0;
    }

    to {
        top: 100%;
    }
}